Hello and welcome.
In this lecture we are going to create their functionality for our projet.
He is in javascript.
We are going to create a few functions.
I've created the first one here.
Call it get time remaining when defining functions you type in the word function followed by a space
and then the name you call the function.
Always name your functions to reflect what you want them to do.
Every fanchon will have a parenthesis and it can be empty or you can pass in values also known as arguments
or Param if those note is a past it a Param if our argument chord.
End Time the end time is a property that returns the time that ends in second.
A return they end in time in seconds.
Line 2.
I have created a vereb line and got a variable chord have named D just with a letter T.
I know I've set it to equalize to date dot pass and then pass it on.
Arguments of end time which we spoke about form land on end the end time property then time property
basically returns the time ending in seconds.
I have said that to a minus date and got pass and then in there you will pass the in the new date function
or method the date dot pass method is used to pass a date or string and returns the number of milliseconds.
Okay so usually is between the date string and the midnight of January 1 1970 online to move got the
new date here a new date for objet here.
So what that does.
Pretending equals an instance of the date and which represents a single moment in time the date objects
are usually based on the time value.
All right that is usually the number of milliseconds since January refers 1970.
Line 3 created a variable corsicans which have set two equal to the maths dot floor method.
The mass floor function is a javascript function that is used to return their largest integer less down
or equal to a given number.
So only in 3 there.
I have the maths still flawed function past it inside this parameter.
I've passed it.
The variable from line to divided that by a thousand and then take in 60 percent of that that will give
us the seconds the time in seconds.
Line 4.
I've done a similar thing to achieved a time in minutes.
Line 5 done the same thing.
To achieve the time in our 24 hours give me a 24 hour clock right.
Notice that line 4 divided and divide that by 60 then and the percentage however lime 5 done the same
in thousand times 60 times 60 again.
Then the percentage is 24.
Okay that will give us the hours then to get two days which is on line 6.
Did similar thing that you divided.
You have a thousand times 60 times 60 times 24 hour right.
That would give us the days you divide the variable by the variable t.
Divide that by these values when you have values are in parentheses.
That means you do the.
You achieve this first.
What that means the multiplication will take place first before the division.
All right.
And same similar things were that it did a multiplication before did division with anything in parentheses.
It's takes a precedent Waller line 7 deep hole so specified return lot you can define returns with functions
functions don't have to return anything but if you want them to return something you can always use
a return so I specified that here on line 7 to return these values okay to return the total time to
this total variable changes mid days hours minutes and seconds so these are the values that asks the
function to return based on the values I have specified.
I have added another function from like 15 to 37.
Its function IV chord initialize clock so this is a function that initialize the clock past past two
arguments or two parameters.
First is the eidy.
This second is the end time as already mentioned the end time property.
Spot the idea you will take.
It would also have loop fully.
So the two two parameters.
Here is an end time line 16 to 20.
I define a few variables then the variable names are self explanatory.
I have said it to was so documental get any member Heidi notice of past it.
The idea here and basically the document that query selects a method is used to return the first element
that matches is specified.
See it says select or select TAWS in the document.
All right so the query method only returns a first element that matches the specified select top.
So here these are these select.
So you've got these variable here cause to clock dot queries select all and pass it days variables.
That is we created if we go up here we created these variables there.
So we've got the returns and days hours and so on.
So that's what is referring to the hours here.
The query selector will return that and that will return these so these days are Was minutes.
These are.
If we are going on our highest amount which you see here.
We got this idea.
We've got less screw up we've got class hours who got minutes.
We've got seconds.
So if I go by car and you see notice the dot here represents the clocks anyway.
If you got an ideal be a hashtag so did dot represents a class for this query select or met a takes
in the day class.
Our class main it's class and second class is classes where all defined in the highest tier male are
asked what that means.
Created another function here on line 22 code of data clock.
This will be used to update the clock and given a variable of.
It would take the variable we defined early and get time remaining past to the end time.
Right then these are various other properties so these days that span an element said that to the T
variable days.
And notice here I have use a slice method the slice method basically is used to extract parts of the
string and it returns the extracted part in a new string.
So the first character usually has a position of zero.
The second has a position of one and so on.
However you can also use negative numbers to select from the in the in if you use a negative number.
It was make the selection from the end of the string.
String is also known as text.
We've got an issue statement here saying if this value is less than what's with this then clear the
time interval and we've got then we here with the updated clock we've got the variable time interval.
Course set intervals always set and we are dating the clock every milliseconds.
That's what that means.
All right.
Just to update the clock.
Okay a line 38 39 kind variable here.
Your deadline cely goes to a new date object.
We passed it is a day dot pass method and we want some values here in this new date method object.
So got we adding a plot 7 7 days of the week and then times 24 hours of the day time is 60 seconds.
16 cities so I can give you one minute and in 60 seconds again.
Now multiply by the interval.
Which is this interval here.
Okay here we have we call this function here.
The initialised function this clock here.
We're calling this function here and we've passed it to variable.
Plus T D clock D.
Which is the total clock Dave and Oswal past is variable called deadline.
Alright so we're calling this function.
We defined you like 15.
Were calling it here to initialize the clock to get the clock started right.
So if the early parts of this functions you don't understand please do let me know.
Here the hours are span in I means.
It will replace what's in the Dave.
Dave here.
This is an elemental open good thing.
They are defined here in this bad.
So that's what is referring to.
It will replace the content where these values are right.
0 plus this t refers to the variables don't ours.
This refers to these values we've already defined.
I've already mentioned what the slice method does.
All right so that's it hard to save the code if you are.
This is a clock.
If I refresh it it should that function should kick in and initialize the clock.
Ah right.
--'s So we've set the clock is ticking away now to show you how to change if you wanted to change
today's quietly set it to do time for that day.
If we go this is where we actually set the timer have set it in the moment to seven days.
So if you wanted to change for example send it did time for an event that's happening in 30 days time.
This is where you change it.
Change is number 30.
These you can leave standard.
This will represent the hour.
This will represent the minutes.
This will represent a second and this would be the time interval.
All right so the only thing you really need to change if you want to change the days is this is where
you change it.
All right.
Just to let you know.
So that's how our countdown clock is ticking away quietly settled at the moment for an event that all
expire in six days time so he's counting down to the event the moment.
Thanks for watching.
Bye for now.